<template>
  <el-card>
    <div class="header">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" @click="addskip"
        ><span class="el-icon-edit"></span>新增试题</el-button
      >
    </div>
    <!-- 输出栏 -->
    <el-form ref="questionRef" :model="queryInfo">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              v-model="value"
              placeholder="请选择"
              @change="getsubject"
            >
              <el-option
                v-for="item in subject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              placeholder="请输入"
              clearable
              v-model="queryInfo.keyword"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-button @click="reset">清除</el-button>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-alert :title="totals" type="info" show-icon> </el-alert>
    <!-- 表单 -->
    <el-table :data="questions">
      <el-table-column
        label="试题编号"
        prop="number"
        width="200px"
      ></el-table-column>
      <el-table-column
        label="学科"
        prop="subject"
        width="200px"
      ></el-table-column>
      <el-table-column label="目录" prop="catalog"></el-table-column>
      <el-table-column label="题型" prop="questionType">
        <template slot-scope="scope">
          <p v-if="scope.row.questionType === '1'">单选</p>
          <p v-else>多选</p>
        </template>
      </el-table-column>
      <el-table-column label="题干" prop="question">
        <template slot-scope="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="addDate">
        <template slot-scope="scope">
          {{ scope.row.addDate | dateformat }}
        </template>
      </el-table-column>
      <el-table-column label="难度" prop="difficulty">
        <template slot-scope="scope">
          <p v-if="scope.row.difficulty === '1'">简单</p>
          <p v-else-if="scope.row.difficulty === '2'">一般</p>
          <p v-else>困难</p>
        </template>
      </el-table-column>
      <el-table-column label="录入人" prop="creator"> </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-view"
            circle
            plain
            size="mini"
            @click="detail(scope.row)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            circle
            plain
            size="mini"
            @click="skip(scope.row.id)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-delete"
            circle
            plain
            size="mini"
            @click="deleteUser(scope.row.id)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-star-off"
            circle
            plain
            size="mini"
            @click="choice(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 详细对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <template slot="title">
        <div class="titleZise">提示</div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】：
            <span v-if="currentInfo.questionType === '1'">单选题</span>
            <span v-else>多选题</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】：{{ this.currentInfo.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】：
            <span v-if="currentInfo.difficulty === '1'">简单</span>
            <span v-else-if="currentInfo.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】：{{ this.currentInfo.tags }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】：{{ this.currentInfo.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】：{{ this.currentInfo.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】：{{ this.currentInfo.direction }}
          </div></el-col
        >
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col :span="20"
          ><div class="grid-content bg-purple">
            【题干】：
            <p class="pcolor" v-html="this.currentInfo.answer"></p>
            <p>
              <span v-if="currentInfo.questionType === '1'">单选题</span>
              <span v-else>多选题</span>选项（以下选中的选项为正确答案）
            </p>
            <el-radio-group v-model="radio">
              <el-radio
                :label="item.isRight"
                v-for="item in currentInfo.options"
                :key="item.id"
                >{{ item.title }}</el-radio
              >
            </el-radio-group>
            {{ this.currentInfo.code }}
          </div></el-col
        >
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col :span="20"
          ><div class="grid-content bg-purple">
            【参考答案】：<el-button type="danger" @click="videoURL"
              >视频答案预览</el-button
            >
          </div>
        </el-col>
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col :span="20"
          ><div class="grid-content bg-purple">
            【答案解析】：https://cn.vuejs.org/ 有答案
          </div></el-col
        >
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col :span="20"
          ><div class="grid-content bg-purple">
            【题目备注】：https://cn.vuejs.org/ 有答案
          </div></el-col
        >
      </el-row>
      <hr />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'questions',
  data () {
    return {
      queryInfo: {
        keyword: '',
        page: 1,
        pagesize: 10
      },
      questions: [],
      total: 0,
      subject: [],
      value: '',
      dialogVisible: false,
      currentInfo: [],
      flag: false,
      radio: 1
    }
  },
  created () {
    this.getList()
    this.getSubList()
  },
  methods: {
    async getList () {
      const { data: res } = await this.$http.get('questions', {
        params: this.queryInfo
      })
      this.questions = res.items
      this.total = res.counts
      console.log(this.questions)
      // console.log(this.queryInfo)
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getList()
    },
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getList()
    },
    deleteUser (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$http.delete(`questions/${id}`)
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    getsubject (value) {
      const index = this.subject.findIndex((item) => item.value === value)
      this.queryInfo.subjectID = this.subject[index].value
    },
    async reset () {
      // this.$refs.questionRef.resetFields()
      this.queryInfo.keyword = ''
      this.value = null
      const { data: res } = await this.$http.get('questions')
      this.questions = res.items
    },
    async getSubList () {
      const { data: res } = await this.$http.get('subjects/simple')
      this.subject = res
      // console.log(this.subject)
    },
    addskip () {
      this.$router.push('/questions/new')
    },
    skip (id) {
      this.$router.push({ name: 'questions-new', query: { id: id } })
    },
    async detail (row) {
      this.dialogVisible = true
      const { data: res } = await this.$http.get(`/questions/${row.id}`)
      this.currentInfo = res
      console.log(this.currentInfo)
    },
    choice (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$http.get(` /questions/choice/${id}/1`)
          this.$message.success('加入精选成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    videoURL () {
      this.flag = !this.flag
    }
  },
  computed: {
    totals () {
      return '数据一共' + this.total + '条'
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin: 10px;
}
.header span {
  color: #ffc0cb;
  font-size: 10px;
}
.header .el-button {
  float: right;
}
.header .el-button span {
  margin-right: 10px;
  color: #fff;
}
.el-row .el-form-item {
  margin-top: 10px;
}
.el-row {
  margin-top: 20px;
}
.el-row .el-input {
  width: 70%;
}
.el-row .el-col .el-button {
  margin-top: 10px;
}
.el-pagination {
  float: right;
}
.titleZise {
  color: #fff;
}
.el-row .el-col {
  margin-bottom: 20px;
}
.pcolor {
  color: blue;
}
.closeVideo {
  display: none;
}
.openVideo {
  display: block;
}
</style>
